extends layout

block content
  h1= title

  div#page-wrapper
        div#page-inner
            div.row
                div.col-md-12.col-sm-12.col-xs-12
                    div.panel.panel-default
                        div.panel-heading
                            label 在线统计
                        div.panel-body
                            div#morris-line-chart
             div.row
                div.col-md-12.col-sm-12.col-xs-12
                    div.panel.panel-default
                        table.table-striped.table-bordered.table-hover
                            tr
                                for head in heads
                                    th #{head}
                                for data in datas
                                    tr
                                        td #{data.date}
                                        for number in data.numbers
                                            td #{number.number}
  script.
        (function ($) {
            "use strict";
            var mainApp = {

                initFunction: function () {
                    /*MENU
                     ------------------------------------*/
                    $('#main-menu').metisMenu();

                    $(window).bind("load resize", function () {
                        if ($(this).width() < 768) {
                            $('div.sidebar-collapse').addClass('collapse')
                        } else {
                            $('div.sidebar-collapse').removeClass('collapse')
                        }
                    });


                    /* MORRIS LINE CHART
                     ----------------------------------------*/
                    Morris.Line({
                        element: 'morris-line-chart',
                        data: !{nowarray},
                        xkey: 'x',
                        ykeys: ['y','y1','y2'],
                        labels: ['今天', '昨天','前天'],
                        fillOpacity: 0.6,
                        hideHover: 'auto',
                        behaveLikeLine: true,
                        resize: true,
                        pointFillColors: ['#ffffff'],
                        pointStrokeColors: ['black'],
                        lineColors: ['red', 'green','#1cc09f']

                    });


                },

                initialization: function () {
                    mainApp.initFunction();

                }

            }
            // Initializing ///

            $(document).ready(function () {
                mainApp.initFunction();
                $("#sideNav").click(function () {
                    if ($(this).hasClass('closed')) {
                        $('.navbar-side').animate({left: '0px'});
                        $(this).removeClass('closed');
                        $('#page-wrapper').animate({'margin-left': '260px'});

                    }
                    else {
                        $(this).addClass('closed');
                        $('.navbar-side').animate({left: '-260px'});
                        $('#page-wrapper').animate({'margin-left': '0px'});
                    }
                });
            });

        }(jQuery));

